﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-2.1.1.min.js"></script>


    <script>
        $(document).ready(function () {

            $.getJSON("api/counties?callback=?", function (data) {
                //alert(data);
                $.each(data, function (key, value) {
                    //alert("Couint: " + value.CountyName);
                    $('#countylist').append("<li>" + value.countyName);
                });
            });

            $.getJSON("api/locations/count?callback=?", function (data) {
                //alert(data);
                $.each(data, function (key, value) {
                    //alert("Couint: " + value.CountyName);
                    $('#locationcount').append("<li>" + value.locationName + '  ' + value.count);
                });
            });

            $.getJSON("api/locations?callback=?", function (data) {
                //alert(data);
                $.each(data, function (key, value) {
                    //alert("Couint: " + value.CountyName);
                    $('#location').append("<li>" + value.locationName + '  ' + value.id);
                });
            });

        });
        

    </script>
</head>
<body>
    <h2>AJAX Test with JSONP</h2>

    <div>
        <ul id="countylist">
            <!-- Dynamically Built by AJAX-->
        </ul>
    </div>

    <hr />

    <div>
        <ul id="locationcount">
            <!-- Dynamically Built by AJAX-->
        </ul>
    </div>

    <hr />

    <div>
        <ul id="location">
            <!-- Dynamically Built by AJAX-->
        </ul>
    </div>


</body>
</html>
